<!-- 我要买房 二手房列表 -->
<template>
	<view>
		<view class="u-rela">
			<!-- 自定义顶部导航 -->
			<u-navbar :safeAreaInsetTop="true" bgColor="transparent">
				<view slot="left" class="u-flex">
					<view class="u-flex m-flex-no u-flex-y-center u-m-r-30" @click="regionShow = true">
						<u-icon name="dingwei" customPrefix="master" size="18"></u-icon>
						<view class="u-m-l-10">{{ city }}</view>
					</view>
					<view class="u-flex-1">
						<u-search placeholder="你想找哪里呢？" bgColor="#fff" v-model="keyword" :show-action="false"
							@click="nextNav('/pages/zufang/search?type=3')" :disabled="true"></u-search>
					</view>
				</view>
			</u-navbar>
			<view class="boxheight m-bg-w">
				<view class="m-mg-lr">
					<view class="m-mg-lr u-flex u-flex-between boxrow">
						<view class="u-flex" v-for="(item, index) in list" :key="index"
							@click="requestStatus ? gettabClick(index) : ''">
							<view>
								<text class="u-font-24" :class="cut === index ? 'ch' : 'c5'">{{ item.name }}</text>
							</view>
							<view class="u-m-t-5">
								<u-icon :name="item.icon" size="14" color="#cecccc"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="m-popup">
				<u-popup :show="show" :overlay="true" :duration="0" mode="top" height="200rpx"
					:customStyle="{ top: popupTop - 5 + 'px' }" @close="close" :closeOnClickOverlay="true">
					<!-- 区域 -->
					<view class="boxgu">
						<view class="" v-if="cut === 0">
							<view class="u-flex u-flex-between u-flex-1 m-mg-lr">
								<view class="w_33">
									<view class="u-m-t-30" v-for="(item, index) in cityall"
										:class="cut0 === index ? 'itemon' : ''" :key="index"
										@click="getxuancity(index, item, '1')">
										{{ item.name }}
									</view>
								</view>
								<view class="w_33">
									<view class="u-m-t-30" v-for="(item, index) in cityallchild"
										:class="cityind === index ? 'itemon' : ''" :key="index"
										@click="getxuancity(index, item, '2')">
										{{ item.name }}
									</view>
								</view>
								<view class="w_33">
									<view class="u-m-t-30" v-for="(item, index) in cityallchildchild"
										:class="citychid === index ? 'itemon' : ''" :key="index"
										@click="getxuancity(index, item, '3')">
										{{ item.name }}
									</view>
								</view>
							</view>
						</view>
						<!-- 价格 -->
						<view class="cut1-item c62" v-if="cut === 1 || cut === 2 || cut === 4">{{ params.title }}</view>
						<view class="u-flex u-flex-wrap u-m-t-30" v-if="cut === 1 || cut === 2 || cut === 4">
							<view class="cut2-item" v-if="cut === 1" :class="cut1 === index ? 'item-on' : ''"
								v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
							<view class="cut2-item" v-if="cut === 2" :class="cut2 === index ? 'item-on' : ''"
								v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
							<view class="cut2-item" v-if="cut === 4" :class="cut4 === index ? 'item-on' : ''"
								v-for="(item, index) in params.list" :key="index" @click="getin(index, item, cut)">
								<text>{{ item.label }}</text>
							</view>
						</view>
						<view class="" v-if="cut === 3">
							<view class="cut1-item c62">更多选项</view>
							<view class="u-m-t-30 m-mg-lr">
								<view class="u-flex u-m-b-20" v-for="(item, index) in listdata" :key="index">
									<view class="w_30 u-m-t-15">{{ item.name }}</view>
									<view class="u-m-l-30 u-flex u-flex-wrap w_70">
										<view class="cut2-item" :class="it.bool ? 'item-on' : ''"
											v-for="(it, ind) in item.child" :key="ind" @click="goduo(index, ind)">
											<text>{{ it.name }}</text>
										</view>
									</view>
								</view>
								<view class="u-flex">
									<view class="w_30 u-m-t-15">有无电梯:</view>
									<view class="u-m-l-30 u-flex u-flex-wrap w_70">
										<view class="cut2-item" :class="yw === 1 ? 'item-on' : ''" @click="yw = 1">
											<text>有电梯</text>
										</view>
										<view class="cut2-item" :class="yw === 2 ? 'item-on' : ''" @click="yw = 2">
											<text>无电梯</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view style="height: 20rpx; background-color: #fff; margin-top: 10rpx;"></view>
					<view class="u-flex boxbottom">
						<view class="u-flex-1" @click.stop="Reset">
							<view class="button-one">重置</view>
						</view>
						<view class="u-flex-1" @click.stop="requestStatus ? determine() : ''">
							<view class="button-two">确定</view>
						</view>
					</view>
				</u-popup>
			</view>
			<view class="u-m-t-80">
				<view class="heighly">
					<zufang :list="dataList" :listHighly="highly"></zufang>
				</view>
			</view>
			<view :style="{ height: 55 + sys.bottom + 'px' }"></view>
			<u-picker :show="regionShow" keyName="name" :columns="[getcity]" @cancel="regionShow = false"
				@confirm="confirm"></u-picker>
			<tabbar ref="tabbar" @newObj="newObj"></tabbar>
			<u-loading-page :loading="pageLoad"></u-loading-page>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yw: 0,
				bannerlist: [],
				getcity: [],
				cut: 0,
				cut0: '',
				cut1: null,
				cut2: '',
				cut3: '',
				cut4: '',
				cutname0: null,
				cutname1: null,
				cutname2: null,
				cutname3: null,
				cutname4: null,
				geng1: [],
				params: {},
				listdata: [{
						name: '面积:',
						child: [{
								name: '40m²',
								bool: false
							},
							{
								name: '40-60m²',
								bool: false
							},
							{
								name: '60-80m²',
								bool: false
							},
							{
								name: '80-100m²',
								bool: false
							},
							{
								name: '100-120m²',
								bool: false
							},
							{
								name: '120m²',
								bool: false
							}
						]
					},
					{
						name: '亮点:',
						child: [{
								name: '拎包入住',
								bool: false
							},
							{
								name: '押一付一',
								bool: false
							},
							{
								name: '认证公寓',
								bool: false
							},
							{
								name: '随时看房',
								bool: false
							},
							{
								name: '推荐好房',
								bool: false
							}
						]
					},
					{
						name: '朝向:',
						child: [{
								name: '东',
								bool: false
							},
							{
								name: '南',
								bool: false
							},
							{
								name: '西',
								bool: false
							},
							{
								name: '北',
								bool: false
							},
							{
								name: '南北',
								bool: false
							}
						]
					},
					{
						name: '楼层:',
						child: [{
								name: '低楼层',
								bool: false,
								num: 5
							},
							{
								name: '中楼层',
								bool: false,
								num: 10
							},
							{
								name: '高楼层',
								bool: false,
								num: 15
							}
						]
					},
					{
						name: '租期:',
						child: [{
								name: '月租',
								bool: false
							},
							{
								name: '年租',
								bool: false
							},
							{
								name: '1-3个月',
								bool: false
							},
							{
								name: '4-6个月',
								bool: false
							}
						]
					},
					{
						name: '装修:',
						child: [{
								name: '精装修',
								bool: false
							},
							{
								name: '豪华装修',
								bool: false
							},
							{
								name: '简单装修',
								bool: false
							}
						]
					},
					{
						name: '家电家私:',
						child: [{
								name: '齐全',
								bool: false
							},
							{
								name: '空房',
								bool: false
							}
						]
					},
					{
						name: '品牌:',
						child: []
					}
				],
				popupTop: 0,
				show: false,
				list: [{
						name: '区域',
						icon: 'arrow-down-fill'
					},
					{
						name: '价格',
						icon: 'arrow-down-fill'
					},
					{
						name: '房型',
						icon: 'arrow-down-fill'
					},
					{
						name: '更多',
						icon: 'arrow-down-fill'
					},
					{
						name: '排序',
						icon: 'arrow-down-fill'
					}
				],
				cityind: 0,
				cityall:[],
				citychid: 0,
				cityindname: '', //城市
				citychildname: '', // 区域
				cityallchild: [{
					name: '不限'
				}],
				cityallchildchild: [{
					name: '不限'
				}],
				bool: false,
				type: 0,
				cityall: []
			};
		},
		async onLoad() {
			let cityall = uni.getStorageSync('cityall');
			if(cityall){
				this.cityall = JSON.parse(cityall);
			}

			this.getcity = await this.require('getcity');
			this.getcity.unshift({
				id: 0,
				name: '不限'
			});
			this.city = this.getcity[1] ? this.getcity[1].name : '东莞市';

			await this.getList();

			this.bannerlist = await this.require('bannerlist');
			if (this.pageLoad) {
				setTimeout(() => {
					this.pageLoad = false;
				}, 1000);
			}

			let res = await this.require('getApartment'); //获取公寓品牌
			if (res) {
				let name = {
					id: 0,
					name: '所有'
				};
				res.unshift(name);
				this.listdata[7].child = res;
				this.listdata[7].child.forEach(item => {
					this.$set(item, 'bool', false);
				});
			}
		},
		onReady() {
			this.sumHeight('.m-popup');
		},
		methods: {
			async getList() {
				this.params = {
					...this.params,
					pnum: this.pnum,
					city: this.city
				}
				let res = await this.require('getHouselist', this.params)
				if (res) {
					this.dataList = res
				}else{
					this.dataList = []
				}
			},
			getxuancity(ind, item, key) {
				switch (+key) {
					case 1:
						this.cityind = 0;
						this.citychid = 0;
						this.cut0 = ind;
						this.cityallchild = item.child;
						this.cityallchildchild = this.cityallchild[0].child;
						this.cityindname = item.child[0].name;
						this.citychildname = item.child[0].child[0].name;
						break;
					case 2:
						this.citychid = 0;
						this.cityind = ind;
						this.cityallchildchild = item.child;
						this.cityindname = item.name;
						this.citychildname = item.child[0].name;
						break;
					case 3:
						this.citychid = ind;
						this.citychildname = item.name;
						break;
					default:
						break;
				}
			},
			//重置
			Reset() {
				this.cut0 = 0;
				this.cut1 = '';
				this.cut2 = '';
				this.cut4 = '';
				this.yw = '';
				this.cityind = 0;
				this.citychid = 0;
				this.cityindname = '不限';
				this.citychildname = '不限';
				this.listdata.map((p, i) => {
					p.child.map((a, b) => {
						a.bool = false;
					});
				});
			},
			//确定
			async determine() {
				this.requestStatus = false;
				this.show = false;
				let roomnature = ''; //用途
				let style = ''; //装修
				let floor = ' '; //楼龄
				let orientation = ''; //朝向
				let characteristic = ''; //特色
				let area = ''; //面积小 1
				let areamax = ''; //面积大 1
				this.listdata.map((p, i) => {
					p.child.map((a, b) => {
						if (a.bool) {
							if (i === 0) {
								if (b === 0) {
									area = 40;
								} else if (b === 7) {
									areamax = '120m²';
								} else if(0 < b < 7) {
									area = a.name.split('-')[0] * 1;
									if (!a.name.split('-')[1]) return;
									areamax = a.name.split('-')[1].split('m²')[0] * 1;
								}
							}
							i === 1 ? (characteristic += a.name + '/') : '';
							i === 2 ? (orientation += a.name + '/') : '';
							i === 5 ? (style += a.name + '/') : '';
							i === 6 ? (roomnature += a.name + '/') : '';
							i === 3 ? (floor = a.bool ? a.name : '') : '';
						}
					});
				});
				let par = {};
				// if(years != '低楼层') years = years.split('高楼层')[0]*1
				if(floor){
					if (floor != '低楼层') floor = floor.split('高楼层')[0];
				}
				//总价切
				if (this.cut1 != null) {
					if (this.cut1 === 0) {
						par.price = '1000';
					} else if (this.cut1 === 6) {
						par.pricemax = '5000以上';
					} else if (0 < this.cut1 < 6) {
						// par.price = this.cutname1.split('-')[0] * 10000;
						// par.pricemax = this.cutname1.split('-')[1].split('元')[0] * 10000;
						par.price = this.cutname1.split('-')[0];
						par.pricemax = this.cutname1.split('-')[1].split('元')[0];
					}
				}
				this.city = this.cityindname || this.city;

				this.params = {
					p: 1,
					city: this.city === '不限' ? '' : this.city,
					pnum: this.pnum,
					areaname: this.citychildname === '不限' ? '' : this.citychildname,
					price: par.price || '', //最低价格，40000.../40000以下
					pricemax: par.pricemax || '', //最高价格，5000000.../5000000以上
					bedroom: this.cut2 < 5 && this.cut2 ? this.cut2 + 1 : '', //室数，1....
					bedroommax: this.cut2 === 5 && this.cut2 ? this.cut2 + 1 : '', //室数 5室以上
					priceasc: this.cut4 === 1 ? 1 : 0, //排序（总价从低到高），1/0
					pricedesc: this.cut4 === 2 ? 1 : 0, //排序（总价从高到低），1/0
					areadesc: this.cut4 === 4 ? 1 : 0, //面积从大到小，1/0
					areaasc: this.cut4 === 3 ? 1 : 0,
					elevator: this.yw === 1 ? '有电梯' : this.yw === 2 ? '无电梯' : '', //电梯，有电梯/无电梯
					roomnature: roomnature.slice(0, roomnature.length - 1), //用途,住宅/别墅/写字楼/商铺/四合院/车位/其他
					style: style.slice(0, style.length - 1), //装修情况
					floor, //楼龄
					orientation: orientation.slice(0, orientation.length - 1), //朝向
					characteristic: characteristic.slice(0, characteristic.length - 1), //特色
					area, //最小面积，40.../40以下
					areamax //最大面积，200.../200以上
				};
				await this.getList();
				this.requestStatus = true;
			},
			close() {
				this.show = false;
			},
			getin(index, item, cut) {
				this['cut' + this.cut] = index;
				if (this.cut != 0) {
					this['cutname' + cut] = item.label;
				}
			},
			goduo(index, ind) {
				if (index === 0 || index === 1 || index === 2 || index === 3 || index === 4 || index === 5 || index ===
					6 || index === 7) {
					this.listdata[index].child.map((p, i) => {
						if (p.bool) {
							if (i != ind) {
								p.bool = false;
							}
						}
					});
					this.listdata[index].child[ind].bool = !this.listdata[index].child[ind].bool;
				} else {
					let a = 0;
					this.listdata[index].child.map((p, i) => {
						if (p.bool) {
							a++;
						}
					});
					if (a === 3) {
						this.listdata[index].child[ind].bool = false;
					} else {
						this.listdata[index].child[ind].bool = !this.listdata[index].child[ind].bool;
					}
				}
			},
			gettabClick(index) {
				this.requestStatus = false;
				this.cut = index;
				this.show = true;
				this.params = {};
				switch (index) {
					case 0:
						this.cityall.map((p, i) => {
							p.child.map((a, b) => {
								if (this.city == a.name) {
									this.cut0 = i;
									this.cityallchild = p.child;
									this.cityallchildchild = a.child;
									this.cityind = b;
									this.citychildname = a.child[0].name;
								}
							});
						});
						break;
					case 1:
						this.params = {
							title: '价格区间（元）：',
							list: [{
									id: 1,
									label: '1000元'
								},
								{
									id: 2,
									label: '1000-1500元'
								},
								{
									id: 3,
									label: '1500-2000元'
								},
								{
									id: 4,
									label: '2000-3000元'
								},
								{
									id: 5,
									label: '3000-5000元'
								},
								{
									id: 6,
									label: '5000元以上'
								}
							]
						};
						break;
					case 2:
						this.params = {
							title: '房型：',
							list: [{
									id: 1,
									label: '不限'
								},
								{
									id: 2,
									label: '1居'
								},
								{
									id: 3,
									label: '2居'
								},
								{
									id: 4,
									label: '3居'
								},
								{
									id: 5,
									label: '3居以上'
								}
							]
						};
						break;
					case 4:
						this.params = {
							title: '最新发布',
							list: [{
									id: 1,
									label: '默认排序'
								},
								{
									id: 3,
									label: '价格（从低到高）'
								},
								{
									id: 4,
									label: '价格（从高到低）'
								},
								{
									id: 5,
									label: '面积（从小到大）'
								},
								{
									id: 6,
									label: '面积（从大到小）'
								}
							]
						};
						break;
					default:
						break;
				}
				this.requestStatus = true;
			},
			// 计算高度
			sumHeight(element) {
				let _this = this;
				let win_height = 0;
				const query = uni.createSelectorQuery();
				query.select(element).boundingClientRect();
				query.selectViewport().scrollOffset();
				query.exec(function(res) {
					if (res[0]) {
						_this.popupTop = res[0].top + 37;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.boxheight {
		height: 64rpx;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 10076;
	}

	.w_33 {
		width: 32%;
		height: 450rpx;
		overflow-y: auto;
	}

	.w_30 {
		width: 20%;
		text-align: right;
	}

	.w_70 {
		width: 80%;
	}

	.boxgu {
		height: 450rpx;
		overflow-y: auto;
		background-color: #f2f2f2;
	}

	.c62 {
		color: #636262;
	}

	.ch {
		color: #dbb07b;
	}

	.boxbottom {
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
	}

	.c5 {
		color: #5a5a5a;
	}

	.button-two {
		color: white;
		text-align: center;
		background-color: #0e5642;
		line-height: 60rpx;
		height: 60rpx;
	}

	.button-one {
		color: #646262;
		text-align: center;
		line-height: 60rpx;
		height: 60rpx;
	}

	.boxrow {
		align-items: center;
		height: 64rpx;
	}

	.itemon {
		color: #0e5642;
		font-size: 28rpx;
	}

	.cut1-item {
		text-indent: 2em;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #fff;
	}

	.cut3-item {
		height: 60rpx;
		line-height: 60rpx;
		text-indent: 2em;
		color: #606060;
	}

	.cut2-item {
		display: inline-block;
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-left: 25rpx;
		margin-bottom: 20rpx;
		color: #606060;
	}

	.item-on {
		background-color: #0e5642 !important;
		color: #ffffff;
	}
</style>
